<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Emmet语法(emmet grammar)</title>
  <!-- 
    Emmet是一种快速编写HTML和CSS代码的工具，它提供了一套简洁的语法规则，可以快速生成复杂的代码结构。以下是关于Emmet语法规则的主要要点： 
 
      1. 选择器：使用类似CSS选择器的语法来快速生成HTML元素，如 div 、 p 、 ul>li 等。 
      2. 子元素：使用 > 符号表示子元素，例如 ul>li 表示ul下的li元素。 
      3. 兄弟元素：使用 + 符号表示兄弟元素，例如 div+p 表示div后面紧邻的p元素。 
      4. 群组元素：使用 , 符号表示并列元素，例如 h1,h2,h3 表示h1、h2和h3元素。 
      5. 乘数：使用 * 符号表示重复元素，例如 ul>li*3 表示生成3个li元素。 
      6. 属性：使用 [] 符号来添加属性，例如 a[href="#"] 表示带有href属性的a标签。 
      7. 文本内容：使用 {} 符号来添加文本内容，例如 p{Hello World} 表示带有文本内容的p标签。 
      8. 嵌套：使用 () 符号来嵌套元素，例如 ul>(li>a) 表示生成带有a标签的li元素。 
  -->

</head>
<body>

  <!-- ul>li*3 -->
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <!-- div>span+div^p -->
  <div>
    <span></span>
    <div></div>
  </div>
  <p></p>

  <!-- a.baidu[href="http://www.baidu.com"]{百度一下} -->
  <a class="baidu" href="http://www.baidu.com">百度一下</a>

  <!-- h1{emmet}+div.container-emmet>span+ul>(li{$}*3)*1 -->
  <h1>emmet</h1>
  <div class="container-emmet">
    <span></span>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  
</body>
</html>